<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" type="text/css" href="css/3.css"/>
	<link rel="stylesheet" type="text/css" href="css/2.css"/>
	</head>
	<body>
	<div class="web">
			
		
	<header>
		
	 	
	 		<div id="main" >  
	 			<!--规则	左上角-->
           	 <a class="icon_2_3"  href="javascript:showBg();"></a>  
          		<!--规则说明	弹窗-->
            <div id="dialog">
            	
                    <a href="#" onclick="closeBg();">
                    <div class="icon_2_6">
                    	<img src="img/2_6.png"/>
                    </div>
                    </a>
                    <!--内容-->
                    
                    <h4 class="state">
                    	规则说明
                    </h4>
                   	<div class="rule">
                   		<p>
                   			1. 每个ID只有1次抽奖机会，100%中奖。
                   		</p>
                   		<p>
                   			2.中奖后，请与哔帮小秘书联系，告知奖品收货地址，我们将会在活动结束48小时内送出。
                   		</p>
                   		<p>
                   			3.所有奖品免费领取，奖品的快速由消费者承担，如果没有与小秘书特别说明，我们默认以顺丰到付的形式寄出。
                   		</p>         		
                   	</div>  
                   	<p class="copyright">
                   		活动最终解析权归广州顺代邦网络科技有限公司所有
                   	</p>
                   	<div class="logo">
                   		<img src="img/2_7.png"/>
                   	</div>
            </div>  
        	</div>
	 	
		
			<div id="audio_btn" class="rotate">
    		 <audio loop src="music/munsic.mp3" id="media" autoplay="" preload=""></audio>
			</div>
		
		
		
		
	</header>
	<section>
		<div class="icon_img3_2">
			<img src="img/3_6.png"/>
		</div>
		
		
		<div class="icon_img3_3">
			<img src="img/jiugongge/4.png"/>
		</div>
	
	
	
	<div class="cash" id="btn">  
		<div class="cash_last">
			<img src="img/3_5.png"/>
		</div>
					
	</div>
	
	
    <div id="div1" style="display:none;">  
	    <a href="" class="icon2_6">
	    	<img  src="img/2_6.png">
	    </a>
	    
    	<span class="gongxi">
    	恭喜您抽到<br/>
		请与哔帮小秘书联系, 核实收货地址
    	</span>
    	<!--二维码-->
    	<div class="code">
    		<img src="img/QR.png"/>
    	</div>
    	
    	<span class="mm">
    		小秘书二维码
    	</span>
    	<div class="logo">
    		<img src="img/2_7.png"/>
    	</div>
    </div>

	</section>
	
	
	</div>	
<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>

	<script type="text/javascript">
		//jq 弹窗
	//显示灰色 jQuery 遮罩层   
        function showBg() {  
            var bh = $("#main").height();  
            var bw = $("#main").width();  
            $("#fullbg").css({  
                height: bh,  
                width: bw,   
                display: "block"  
            });  
            $("#dialog").show();  
        }  
        //关闭灰色 jQuery 遮罩   
        function closeBg() {  
            $("#fullbg,#dialog").hide();  
        } 
        
// js 弹窗
var oBtn = document.getElementById('btn');
    var oDiv = document.getElementById('div1');
 
 oBtn.onclick=function(){
        oDiv.style.cssText = 'display:block;';
    };
    
    
//音乐
//$("#audio_btn").click(function(){
//   $(this).toggleClass("rotate"); //控制音乐图标 自转或暂停
//});
 var x = document.getElementById("media"); 
  $(function(){
      $("#audio_btn").click(function(){
          $(this).toggleClass("rotate"); //控制音乐图标 自转或暂停
          
          //控制背景音乐 播放或暂停            
          if($(this).hasClass("rotate")){
              x.play();
          }else{
             x.pause();
         }
     })
 });






	</script>
	
	<script>
			document.body.style.height = window.innerHeight + "px";

			/*动态改变根元素字体大小*/
			function recalc() {
				var clientWidth = document.documentElement.clientWidth;
				if(!clientWidth) return;
				document.documentElement.style.fontSize = 40 * (clientWidth / 640) + 'px';
				//字体大小   =1个rem单位表示多少个像素*(设备的宽度 /设计宽度)
			}

			function initRecalc() {
				recalc();
				var resizeEvt = 'osrientationchange' in window ? 'orientationchange' : 'resize';
				if(!document.addEventListener) return;
				window.addEventListener(resizeEvt, recalc, false);
				document.addEventListener('DOMContentLoaded', recalc, false);
			}
			initRecalc();
	</script>
	
	</body>
</html>
